<div id="clear-modal" class="ui small modal transition">
    <i class="close icon"></i>
    <div class="header">
        清理日志事件
    </div>
    <div class="content">
        <p>你确认清理所有的日志事件?</p>
    </div>
    <div class="actions">
        <div class="ui negative button">
            不，取消
        </div>
        <div ng-click="vm.clearEvents()" class="ui positive right labeled icon button">
            是的，确认
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>
<div class="ui padded grid">
    <div class="two column row">
        <div class="left floated column">
            <div ng-click="vm.refresh()" class="ui small blue labeled icon button">
                <i class="refresh icon"></i> 刷新
            </div>
            <div ng-click="vm.showClearEventsDialog()" class="ui small red labeled icon button">
                <i class="trash icon"></i> 清理日志事件
            </div>
        </div>
        <div class="right aligned right floated column">
            <div class="ui small icon input">
                <input ng-model="tableFilter" placeholder="查询日志事件信息..." reset-field/>
            </div>
        </div>
    </div>

    <div class="row" ng-show="vm.events.length === 0">
        <div class="column">
            <div class="ui icon message">
                <i class="info icon"></i>
                <div class="content">
                    <div class="header">
                       日志事件信息
                    </div>
                    <p>没有查询到日志信息.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row" ng-show="filteredEvents.length > 0">
        <div class="column">
            <table class="ui sortable celled table" ng-show="vm.events">
                <thead>
                    <tr>
                        <th>事件</th>
                        <th>用户</th>
                        <th>事件类型</th>
                        <th>消息</th>
                        <th>容器</th>
                        <th>节点</th>
                        <th>标签</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="e in filteredEvents = (vm.events | filter:tableFilter)">
                        <td>{{e.time}}</td>
                        <td>{{e.username}}</td>
                        <td>{{e.type}}</td>
                        <td>{{e.message}}</td>
                        <td>{{e.container.id | limitTo:8}}</td>
                        <td>{{e.engine.id}}</td>
                        <td>{{e.tags.join(', ')}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="row" ng-show="vm.events.length > 0 && filteredEvents.length === 0">
        <div class="column">
            <div class="ui icon message">
                <i class="info icon"></i>
                <div class="content">
                    <div class="header">
                        日志事件信息
                    </div>
                    <p>没有查询到你想要的日志事件信息。</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$('.ui.sortable.celled.table').tablesort();
</script>
